<!--
 * @Author: wangzhichiao<https://github.com/wzc570738205>
 * @Date: 2020-05-12 15:58:29
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2020-05-12 17:21:58
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地址智能识别</title>
  <link rel="icon" type="image/x-icon" href="img/smart.png">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/pcasCode.js"></script>
    <script src="js/zipCode.js"></script>
    <script src="js/address_parse.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <style>
        #value .key {
            color: #ff5722;
            display: inline-block;
            width: 111px;
            text-align: right;
        }

        #value .value {
            color: #366500;
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <form>
        <div class="form-group">
            <label for="name">请复制淘宝地址</label>
            <textarea class="form-control" onchange="getAddress()" cols="50" rows="7" id='textarea'
            placeholder="请粘贴你的地址"></textarea>
          </div>
        
        <div class="form-group">
          <label for="name">姓名</label>
          <input type="text"  id="name" class="form-control" id="name" placeholder="Email">
        </div>

        <div class="form-group">
            <label for="phone">姓名</label>
            <input type="text"  id="phone" class="form-control" id="phone" placeholder="Email">
          </div>

          <div class="form-group">
            <label for="phone">详细地址</label>
            <input type="text"  id="address" class="form-control" id="phone" placeholder="Email">
          </div>
      </form>
      <div id="value"></div>
</body>

</html>
<script>
function autoInput(data){
        $('#name').val(data.name)
        $('#phone').val(data.phone)
        $('#address').val(data.address)
    }

    function getAddress(address) {
        let parse_list = smart($('#textarea').val())
        let html = '';
        for (let key in parse_list) {
            if (parse_list[key]) {
                html += `<p><span class="key">` + key + `</span>:<span class="value">` + parse_list[key] + `</span></p>`
            }
        }
        $('#value').html(html);

        autoInput(parse_list)
    }
</script>